<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11列表组面板和嵌入组件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
    </style>
</head>

<body style="margin:100px">

    <!-- 列表组件 显示一组列表的组件 -->
    <ul class="list-group">
        <li class="list-group-item">1.这是起始</li>
        <li class="list-group-item">2.这是第二条数据<span class="badge">10</span></li>
        <li class="list-group-item">3.这是第三排信息</li>
        <li class="list-group-item list-group-item-success">4.这是末尾</li>
    </ul>

    <div class="list-group">
        <!-- 链接 和 首选 -->
        <button class="list-group-item">1.这是起始</button>
        <button class="list-group-item active">2.这是第二条数据<span class="badge">10</span></button>
        <button class="list-group-item">3.这是第三排信息</button>
        <button  class="list-group-item">4.这是末尾</button>
    </div>


    <div class="list-group">
        <!-- 链接 和 首选  定制内容   -->
        <a href="#" class="list-group-item">
            <h4>列表标题</h4>
            <p>详细内容</p>
        </a>
        <a href="#" class="list-group-item active">2.这是第二条数据<span class="badge">10</span></a>
        <a href="#" class="list-group-item">3.这是第三排信息</a>
        <a href="#" class="list-group-item list-group-item-success">4.这是末尾</a>
    </div>

    <!-- 面板组件  一个存放内容的容器组件 -->
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">我是标题区域</h3>
        </div>
        <div class="panel-body">
            我是一个面板容器
        </div>
        <!-- 还可以嵌入表格 -->
        <table class="table">
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
        <!-- 还可以嵌入列表 -->
        <ul class="list-group">
            <li class="list-group-item">1.这是起始</li>
            <li class="list-group-item">2.这是第二条数据<span class="badge">10</span></li>
            <li class="list-group-item">3.这是第三排信息</li>
            <li class="list-group-item list-group-item-success">4.这是末尾</li>
        </ul>
        <div class="panel-footer">
            我是底部
        </div>
    </div>
    
    <br/><br/><br/><br/><br/><br/><br/>
    <!-- 响应式嵌入内容 -->
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="http://video.tudou.com/v/XMTc5NTkyMzMwMA==.html?code=KdBSIKyyQQc&autoPlay=true"></iframe>
    </div>

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>